<template>
  <div v-if="isDesktop || showOnMobile">
    <div v-show="showLeft" class="arrow left" :class="{ shrink, 'light-bg': lightBg }" :style="style" @click="toLeft">
      <Icon name="arrowRight" size="16" style="scale: -1"></Icon>
    </div>
    <div
      v-show="showRight"
      class="arrow right"
      :class="{ shrink, 'light-bg': lightBg }"
      :style="style"
      @click="toRight"
    >
      <Icon name="arrowRight" size="16"></Icon>
    </div>
  </div>
</template>
<script setup>
import { computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useAppStore } from '@/store/app'

const props = defineProps({
  showLeft: { type: Boolean },
  showRight: { type: Boolean },
  toLeft: { type: Function },
  toRight: { type: Function },
  shrink: { type: Boolean, default: false },
  lightBg: { type: Boolean, default: false },
  height: { type: [String, Number] },
  width: { type: [String, Number] },
  top: { type: [String, Number] },
  showOnMobile: { type: Boolean, default: false },
})

const { isDesktop } = storeToRefs(useAppStore())

const style = computed(() => {
  const _style = {}
  if (props.height) _style.height = `${props.height / 16}rem`
  if (props.width) _style.width = `${props.width / 16}rem`
  if (props.top) _style.top = `${props.top / 16}rem`
  return _style
})
</script>
<style scoped lang="scss">
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  display: flex;
  justify-content: center;
  align-items: center;

  width: calc(2rem + 2px);
  height: calc(2rem + 2px);

  border-radius: 1.875rem 0rem 0rem 1.875rem;
  background: rgba(24, 25, 37, 0.5);

  backdrop-filter: blur(9px);

  cursor: pointer;

  &.left {
    left: 0;
    border-radius: 0px 30px 30px 0px;
  }

  &.right {
    right: 0;
    border-radius: 30px 0px 0px 30px;
  }

  &.shrink {
    width: 1rem;
  }

  &.light-bg {
    background: rgba(24, 25, 37, 0.02);
  }
}
</style>
